import {
  CascaderProps,
  DatePickerProps,
  InputNumberProps,
  InputProps,
  SelectProps,
  TreeSelectProps
} from 'naive-ui'
import { LabelAlign } from 'naive-ui/es/form/src/interface'
import { Ref } from 'vue'
import { DictOptions } from './common'

// 输入框搜索项
type InputQuery = {
  type: 'input'
  key: string
  number?: boolean
  props?: InputProps
}

// 范围搜索项
type RangeQuery = {
  type: 'range'
  key: string[]
  number?: boolean
  props?: InputProps
}

// 数字框搜索项
type InputNumberQuery = {
  type: 'inputNumber'
  key: string
  props?: InputNumberProps
}

// 下拉选搜索项
type SelectQuery = {
  type: 'select'
  key: string
  props?: SelectProps
  dictOptions?: DictOptions[]
  dictCode?: number | string
  valueCode?: string
  labelCode?: string
}

// 级联搜索项
type CascaderQuery = {
  type: 'cascader'
  key: string
  props?: CascaderProps
  dictOptions?: DictOptions[]
  dictCode?: number | string
  valueCode?: string
  labelCode?: string
}

// 日期搜索项
type DateQuery = {
  type: 'date'
  key: string
  props?: DatePickerProps
}

// 年度搜索项
type YearQuery = {
  type: 'year'
  key: string
  props?: DatePickerProps
}

// 日期范围搜索项
type DaterangeQuery = {
  type: 'daterange'
  key: string[]
  props?: DatePickerProps
}

// 自定义搜索项
type CustomQuery = {
  type: 'custom'
  key: string | string[]
  render?: (queryForm: Ref<Record<string, any>>) => JSX.Element
}

// 下拉树搜索项
type TreeSelectQuery = {
  type: 'treeSelect'
  key: string
  props?: TreeSelectProps
  dictOptions: DictOptions[]
  labelCode?: string
  keyCode?: string
}

export type ProTableQueryItem = (
  | InputQuery
  | RangeQuery
  | InputNumberQuery
  | SelectQuery
  | CascaderQuery
  | DateQuery
  | YearQuery
  | DaterangeQuery
  | CustomQuery
  | TreeSelectQuery
) & {
  title: string
  placeholder?: string
  labelWidth?: number | string | 'auto'
  labelAlign?: 'left' | 'right'
  // 排序序号
  order?: number
  // n-grid所占列数 默认：6
  span?: number | string
  // 默认值
  defaultValue?: any
  // 是否显示 默认：true
  visiable?: boolean
  // 不重置 默认：false
  noReset?: boolean
}

export type QueryPorps = {
  // 整体的label宽度
  labelWidth: string | number
  // 整体的label位置
  labelAlign: LabelAlign
  // 是否默认折叠 默认：true
  defaultCollapsed: boolean
  // 搜索按钮文案
  searchBtnText: string
  // 重置按钮文案
  resetBtnText: string
  // 是否开启自定搜索 默认：false
  autoSearch: boolean
  // 折叠时第一行拥有几个表单输入 默认：3
  firstLineQueryCount: number
}

export type ProTableQuery = ProTableQueryItem[]
